<template>
  <div class="login">
    <viedobg></viedobg>
    <div class="login-icon"></div>
    <div class="login-box ">
      <div class="page-title">高平市水环境监控预警与风险防控管理平台</div>
      <div class="d-flex a-center j-center" style="margin-top: 120px;">
        <div class="login-win">
          <div class="login-title">欢迎登录</div>
          <div class="d-flex a-center j-center" style="margin-top: 60px;">
            <div>
              <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
                <el-form-item prop="username" class="login-user">
                  <el-input type="text" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <!-- <div class="login-user">
                </div> -->
                <!-- <div class="login-pass mt-30">
                </div> -->
                <el-form-item prop="password" class="login-pass mt-30">
                  <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item prop="code" class="login-code-box mt-30">
                  <el-input type="text"  style="width: 63%" v-model="loginForm.code" placeholder="请输入验证码"></el-input>
                  <div class="login-code"><img :src="codeUrl" @click="getCode" class="login-code-img" /></div>
                </el-form-item>
                <div class="login-btn d-flex a-center j-center">
                  <div class="login-btn-item" @click="handleLogin">登录</div>
                </div>
              </el-form>
            </div>
          </div>
        </div>
      </div>
      <!-- <systems></systems> -->
    </div>
    <!-- <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      class="login-form"
    >
      <h3 class="title">{{ title }}</h3>
      <el-form-item prop="username">
        <el-input
          v-model="loginForm.username"
          type="text"
          auto-complete="off"
          placeholder="账号"
        >
          <svg-icon
            slot="prefix"
            icon-class="user"
            class="el-input__icon input-icon"
          />
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          auto-complete="off"
          placeholder="密码"
          @keyup.enter.native="handleLogin"
        >
          <svg-icon
            slot="prefix"
            icon-class="password"
            class="el-input__icon input-icon"
          />
        </el-input>
      </el-form-item>
      <el-form-item prop="code" v-if="captchaEnabled">
        <el-input
          v-model="loginForm.code"
          auto-complete="off"
          placeholder="验证码"
          style="width: 63%"
          @keyup.enter.native="handleLogin"
        >
          <svg-icon
            slot="prefix"
            icon-class="validCode"
            class="el-input__icon input-icon"
          />
        </el-input>
        <div class="login-code">
          <img :src="codeUrl" @click="getCode" class="login-code-img" />
        </div>
      </el-form-item>
      <el-checkbox
        v-model="loginForm.rememberMe"
        style="margin: 0px 0px 25px 0px"
        >记住密码</el-checkbox
      >
      <el-form-item style="width: 100%">
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width: 100%"
          @click.native.prevent="handleLogin"
        >
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
        <div style="float: right" v-if="register">
          <router-link class="link-type" :to="'/register'"
            >立即注册</router-link
          >
        </div>
      </el-form-item>
    </el-form> -->
    <!-- <div class="el-login-footer">
      <span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
    </div> -->
  </div>
</template>

<script>
import {
  getCodeImg,
  getRSASecretKeyPair,
  getEncryptionEnabled,
} from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import viedobg from "../components/viewComponents/videobg/viedobg.vue";
export default {
  name: "Login",
  components: {viedobg },
  data() {
    return {
      title: '登录'|| process.env.VUE_APP_TITLE,
      codeUrl: "",
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
        code: "",
        uuid: "",
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" },
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
      },
      loading: false,
      // 验证码开关
      captchaEnabled: true,
      // 密钥对包含私钥和公钥
      secretKeyObj: {},
      // 账号是否开启加密 true:启用；false:关闭；
      encryptionEnabled: false,
      // 注册开关
      register: false,
      redirect: undefined,
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  created() {
    this.getCode();
    this.getCookie();
    this.getEncryptionEnabled();
  },
  methods: {
    // 获取账号密码加密的密钥对
    getRSASecretKeyPair() {
      getRSASecretKeyPair().then((res) => {
        this.secretKeyObj = res;
      });
    },
    getCode() {
      getCodeImg().then((res) => {
        this.captchaEnabled =
          res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },
    // 获取账号加密开关
    getEncryptionEnabled() {
      getEncryptionEnabled().then((res) => {
        this.encryptionEnabled =
          res.encryptionEnabled === undefined ? false : res.encryptionEnabled;
        if (this.encryptionEnabled) {
          this.getRSASecretKeyPair(); // 当开关值为true时执行加密
        }
      });
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get("rememberMe");
      this.loginForm = {
        username:
          username === undefined
            ? this.loginForm.username
            : this.encryptionEnabled == true
            ? decrypt(username, this.secretKeyObj.privateKey)
            : username,
        password:
          password === undefined
            ? this.loginForm.password
            : decrypt(password, this.secretKeyObj.privateKey),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
      };
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set(
              "username",
              this.encryptionEnabled == true
                ? encrypt(this.loginForm.username, this.secretKeyObj.publicKey)
                : this.loginForm.username,
              { expires: 30 }
            );
            Cookies.set(
              "password",
              encrypt(this.loginForm.password, this.secretKeyObj.publicKey),
              { expires: 30 }
            );
            Cookies.set("rememberMe", this.loginForm.rememberMe, {
              expires: 30,
            });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove("rememberMe");
          }
          this.$store
            .dispatch(
              this.encryptionEnabled == true ? "LoginEncryption" : "Login",
              this.loginForm
            )
            .then(() => {
              this.$router.push({ path: this.redirect || "/" }).catch(() => {});
            })
            .catch(() => {
              this.loading = false;
              if (this.captchaEnabled) {
                this.getCode();
              }
            });
        }
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss">
.login {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
  #backgroundVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    width: auto;
    height: auto;
    z-index: -2;
    object-fit: cover;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
  }
  .login-icon{
    background-image: url("../assets/login/icon.png");
    background-size: 100% 100%;
    width: 80%;
    height: 480px;
    position: absolute;
    left: 10%;
    bottom: 0;
    z-index: -1;
  }
  .login-box{
    background-image: url("../assets/login/bg.png");
    height: 100%;
    background-size: 100% 100%;
    .page-title{
      text-align: center ;
      font-weight: bold;
      font-size: 30px;
      color: #FFFFFF;
      line-height: 60px;
      text-shadow: 0px 4px 1px rgba(19,80,143,0.66);
      // background: linear-gradient(0deg, rgba(119,186,255,0.45) 0%, rgba(233,248,255,0.45) 73.3154296875%, rgba(255,255,255,0.45) 100%);
      // opacity: 0.89;
    }
    .login-win{
      width: 740px;
      height: 480px;
      background-image: url("../assets/login/loginbox.png");
      background-size: 100% 100%;
      .login-title{
        font-size: 25px;
        font-weight: bold;
        text-align: center;
        line-height: 80px;
        color: #FFFFFF;
        margin-top: 23px;
      }
      .login-user,.login-pass,.login-code-box,.login-btn{
        width: 380px;
        height: 44px;
        background-size: 100% 100%;
        input{
          height: 44px;
          background: #1747A6;
          border-radius: 0;
          border: 1px solid #4787fe;
          color: #FFFFFF;
        }
      }
      .login-user{
        padding-left: 50px;
        background-image: url("../assets/login/user.png");
      }
      .login-pass{
        padding-left: 50px;
        background-image: url("../assets/login/psd.png");
      }
      .login-code-box{
        padding-left: 50px;
        background-image: url("../assets/login/code.png");
      }
      .login-btn{
        margin-top: 40px;
        .login-btn-item{
          width: 140px;
          height: 40px;
          background: linear-gradient(0deg, #47A2FF 0%, #4788FF 100%);
          border-radius: 4px;
          font-weight: 400;
          font-size: 20px;
          color: #FFFFFF;
          text-align: center;
          line-height: 40px;
          cursor: pointer;
        }
      }
      
    }
  }

}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;
  z-index: 1;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 37%;
  height: 44px;
  float: right;
  img {
    cursor: pointer;
    // vertical-align: middle;
    height: 100%;
    width: 100%;
  }
}
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.login-code-img {
  height: 38px;
}
</style>
